<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:of="http://omnifaces.org/functions"
	xmlns:pe="http://primefaces.org/ui/extensions"
	template="/WEB-INF/templates/template.xhtml">

	<ui:define name="headIncludes">		
		<f:event listener="#{fornecedorBean.initialize}" type="preRenderView"/>
	</ui:define>

	<ui:define name="pageName">Consultar Fornecedor</ui:define>
	
	<ui:define name="buttons">
		<p:commandButton value="Novo" style="height:28px;" action="#{fornecedorBean.changeToNew}" icon="ui-icon-plus"/>
	</ui:define>

	<ui:define name="content">
		<p:panel>
			<p:messages autoUpdate="true" />
			<div>
				<p:selectOneRadio id="option2" value="#{fornecedorBean.tipoPessoa}" immediate="true" 
					valueChangeListener="#{fornecedorBean.changeOption}">
					<f:selectItems value="#{fornecedorBean.tiposPessoa}" itemValue=""/>
					<f:ajax event="change" render="renderList" />
				</p:selectOneRadio>	
				<div>
					<p:outputPanel id="renderList">
						<div id="tabelapj">
							<h:panelGrid columns="9" rendered="#{fornecedorBean.tipoPessoa == 'JURIDICA'}" id="panelPJ">
								<h:outputText value="Filtrar por:" />
	
								<p:inputText id="inputSearchFilterCod" style="width:50px;" value="#{fornecedorBean.filterId}" maxlength="15" title="Código"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPJ').click(); }">
									<pe:keyFilter regEx="/[\d]/" />	
								</p:inputText>
								<p:watermark value="Código" for="inputSearchFilterCod" />
	
								<p:inputText id="inputSearchFilterRS" style="width:300px;" value="#{fornecedorBean.filter}" maxlength="100" title="Razão social"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPJ').click(); }" />
								<p:watermark value="Razão social" for="inputSearchFilterRS" />
	
								<p:inputText id="inputSearchFilterCNPJ" style="width:150px;" value="#{fornecedorBean.filterDoc}" maxlength="20" title="CNPJ"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPJ').click(); }" >
									<pe:keyFilter regEx="/[\d]/" />	
								</p:inputText>
								<p:watermark value="CNPJ" for="inputSearchFilterCNPJ" />
	
								<p:commandButton value="Consultar" style="height:28px;" id="searchButtonFornecedorPJ" action="#{fornecedorBean.fillByFilterPJ}" icon="ui-icon-search"/>
								
							</h:panelGrid>
							<div style="padding-top: 10px;">
								<p:dataTable var="fornecedor" value="#{fornecedorBean.fornecedores}" id="tableFornecedorPj"
									rendered="#{fornecedorBean.tipoPessoa == 'JURIDICA'}" paginator="true"
									rows="10" paginatorPosition="bottom"
									emptyMessage="Não há registros"
									selection="#{fornecedorBean.currentFornecedor}" selectionMode="single" rowKey="#{fornecedor.id}">
									
									<p:ajax event="rowSelect" listener="#{fornecedorBean.changeToDetail}"/>
									
									<p:column headerText="Código" width="100">
										<h:outputText value="#{fornecedor.id}" />
									</p:column>
		
									<p:column headerText="Razão social">
										<h:outputText value="#{of:abbreviate(fornecedor.razaoSocial, 40)}" />
									</p:column>
									
									<p:column headerText="Nome fantasia" width="250">
										<h:outputText value="#{of:abbreviate(fornecedor.nome, 30)}" />
									</p:column>
		
									<p:column headerText="CNPJ" width="120">
										<h:outputText value="#{fornecedor.cnpj}">
											<f:converter converterId="cnpjConverter" /> 
										</h:outputText>
									</p:column>
								
									<p:column headerText="" width="50">
										<p:commandButton icon="ui-icon-pencil"
											style="width: 24px; height: 24px;" action="#{fornecedorBean.changeToEdit(fornecedor.id)}" title="Editar"/>
										<p:spacer width="10px" />
										<p:commandButton icon="ui-icon-trash"
											style="width: 24px; height: 24px;" action="#{fornecedorBean.changeToDelete(fornecedor.id)}" title="Excluir"/>
									</p:column>
								</p:dataTable>
							</div>							
						</div>
						
						<div id="tabelapf" style="margin-top:-10px;">
							<h:panelGrid columns="9" rendered="#{fornecedorBean.tipoPessoa == 'FISICA'}" id="panelPF">
								<h:outputText value="Filtrar por:" />
	
								<p:inputText id="inputSearchFilterId" style="width:50px;" value="#{fornecedorBean.filterId}" maxlength="15" title="Código"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPF').click(); }">
									<pe:keyFilter regEx="/[\d]/" />	
								</p:inputText>
								<p:watermark value="Código" for="inputSearchFilterId" />
	
								<p:inputText id="inputSearchFilterNome" style="width:300px;" value="#{fornecedorBean.filter}" maxlength="100" title="Nome"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPF').click(); }" />
								<p:watermark value="Nome" for="inputSearchFilterNome" />
	
								<p:inputText id="inputSearchFilterCPF" style="width:150px;" value="#{fornecedorBean.filterDoc}" maxlength="20" title="CPF"
									onkeypress="if (event.keyCode == 13) { event.preventDefault();  $('#searchButtonFornecedorPF').click(); }" >
									<pe:keyFilter regEx="/[\d]/" />	
								</p:inputText>
								<p:watermark value="CPF" for="inputSearchFilterCPF" />
	
								<p:commandButton value="Consultar" style="height:28px;" id="searchButtonFornecedorPF" action="#{fornecedorBean.fillByFilterPF}" icon="ui-icon-search"/>
							</h:panelGrid>
							<div style="padding-top: 10px;">
								<p:dataTable var="fornecedor" value="#{fornecedorBean.fornecedores}" id="tableFornecedorPf"
									rendered="#{fornecedorBean.tipoPessoa == 'FISICA'}" paginator="true"
									rows="10" paginatorPosition="bottom"
									emptyMessage="Não há registros"
									selection="#{fornecedorBean.currentFornecedor}" selectionMode="single" rowKey="#{fornecedor.id}">
									
									<p:ajax event="rowSelect" listener="#{fornecedorBean.changeToDetail}"/>
									
									<p:column headerText="Código" width="100">
										<h:outputText value="#{fornecedor.id}" />
									</p:column>
		
									<p:column headerText="Nome">
										<h:outputText value="#{of:abbreviate(fornecedor.nome, 65)}" />
									</p:column>
		
									<p:column headerText="CPF" width="120">
										<h:outputText value="#{fornecedor.cpf}">
											<f:converter converterId="cpfConverter" /> 
										</h:outputText>
									</p:column>
		
									<p:column headerText="Telefone" width="120">
										<h:outputText value="(#{fornecedor.cidade.ddd}) #{fornecedor.telefone}" />
									</p:column>
									<p:column headerText="" width="50">
										<p:commandButton icon="ui-icon-pencil"
											style="width: 24px; height: 24px;" action="#{fornecedorBean.changeToEdit(fornecedor.id)}" title="Editar"/>
										<p:spacer width="10px" />
										<p:commandButton icon="ui-icon-trash"
											style="width: 24px; height: 24px;" action="#{fornecedorBean.changeToDelete(fornecedor.id)}" title="Excluir" />
									</p:column>
								</p:dataTable>
							</div>							
						</div>
					</p:outputPanel>
				</div>
			</div>
		</p:panel>		
	</ui:define>
	<ui:define name="popups">

	<p:dialog appendToBody="true" modal="true" closable="false" widgetVar="popupConfirmDelete"
		width="300" resizable="false" header="Confirmação de exclusão" height="90">
		<h:form>
			<div style="margin-top: 10px;">
				<h:outputText value="Confirma a exclusão do registro?"/>
			</div>
			<div align="right" style="margin-top: 15px; margin-bottom: 15px;">
				<p:commandButton value="Excluir" actionListener="#{fornecedorBean.remove}" oncomplete="popupConfirmDelete.hide()" icon="ui-icon-trash"/>
				<p:commandButton value="Cancelar" onclick="popupConfirmDelete.hide()" icon="ui-icon-cancel"/>
			</div>		
		</h:form>			
		</p:dialog>	
		
	</ui:define>
</ui:composition>